@import '../global/variables.css';
@import '../button/button.css';

.queryAssist {
  --ring-input-icon-offset: calc(var(--ring-unit) * 2.5);
  --ring-input-padding-inline: var(--ring-unit);
  --ring-input-padding-block: 1px;

  position: relative;

  display: flex;
  align-items: center;

  box-sizing: border-box;
  min-height: calc(var(--ring-input-padding-inline) * 3);
  padding: var(--ring-input-padding-block) var(--ring-input-padding-inline);

  transition: border-color var(--ring-ease);

  border: 1px solid var(--ring-borders-color);
  border-radius: var(--ring-border-radius);

  font-size: var(--ring-font-size);
  line-height: var(--ring-line-height);

  & * {
    box-sizing: border-box;
  }

  &:hover {
    transition: none;

    border-color: var(--ring-border-hover-color);
  }

  &:focus-within {
    transition: none;

    border-color: var(--ring-main-color);
  }

  /*
    Kill yellow/blue webkit autocomplete
    https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
  */
  &:-webkit-autofill {
    &,
    &:hover,
    &:focus {
      transition: background-color 50000s ease-in-out 0s;
    }
  }

  .error & {
    border-color: var(--ring-error-color);
  }
}

.queryAssistDisabled {
  color: var(--ring-disabled-color);
  border-color: var(--ring-border-disabled-color);
  background-color: var(--ring-disabled-background-color);

  -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
}

.huge {
  max-height: calc(var(--ring-input-padding-inline) * 4);

  padding: 0 0 0 var(--ring-input-padding-inline);

  & .actions {
    padding-right: var(--ring-input-padding-inline);
  }

  [dir='rtl'] & {
    padding: 0 var(--ring-input-padding-inline) 0 0;

    & .actions {
      padding: 0 var(--ring-input-padding-inline);
    }
  }
}

.input {
  overflow: auto;

  flex-grow: 1;

  margin: 0;

  cursor: text;

  transition: border-color var(--ring-ease);
  white-space: nowrap;

  color: var(--ring-text-color);
  outline: none;
  background: transparent;

  font: inherit;
  scrollbar-width: none;

  caret-color: var(--ring-main-color);
}

.letter-text {
  color: var(--ring-warning-color);
}

.letterDefault,
.letter-field-name {
  color: var(--ring-text-color);
}

.letter-field-value {
  color: var(--ring-link-color);
}

.letter-operator {
  color: var(--ring-secondary-color);
}

.letter-error {
  padding-bottom: 1px;

  border-bottom: 1px solid var(--ring-error-color);
}

.highlight {
  font-weight: var(--ring-font-weight-bold);
}

.service {
  color: var(--ring-secondary-color);
}

.placeholder {
  composes: resetButton from '../global/global.css';

  position: absolute;

  display: block;
  overflow: hidden;

  width: calc(100% - var(--ring-input-padding-inline) * 4);
  padding-left: calc(var(--ring-input-padding-inline) * 3 - var(--ring-input-padding-block));

  white-space: nowrap;

  text-overflow: ellipsis;

  pointer-events: none;

  color: var(--ring-disabled-color);

  [dir='rtl'] & {
    padding-right: calc(var(--ring-input-padding-inline) * 3 + var(--ring-input-padding-block) * 2);

    text-align: right;
  }
}

.hugePlaceholder {
  padding-left: 0;
}

.letter {
  display: inline;
}

.actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 100%;
  max-height: calc(var(--ring-input-padding-inline) * 2);
  padding-left: var(--ring-input-padding-inline);

  line-height: inherit;

  [dir='rtl'] & {
    padding: 0 var(--ring-input-padding-inline) 0 0;
  }
}

.icon {
  padding-right: var(--ring-input-padding-inline);

  color: var(--ring-secondary-color);

  [dir='rtl'] & {
    padding: 0 0 0 var(--ring-input-padding-inline);
  }
}

.rightSearchButton {
  padding: 5px 9px;

  cursor: pointer;

  transition: border-color var(--ring-ease);

  color: var(--ring-secondary-color);

  border: 1px solid var(--ring-borders-color);
  border-right: 0;
  border-radius: var(--ring-border-radius);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

  /* stylelint-disable-next-line selector-max-specificity */
  .queryAssist.queryAssist:focus-within & {
    transition: none;

    border-color: var(--ring-main-color);
  }

  .queryAssist:hover & {
    transition: none;

    border-color: var(--ring-border-hover-color);
  }

  [dir='rtl'] & {
    border-right: 1px solid var(--ring-borders-color);
    border-left: 0;
    border-radius: var(--ring-border-radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.clear {
  top: 1px;

  padding-right: 0;

  [dir='rtl'] & {
    padding-right: var(--ring-input-padding-inline);
    padding-left: 0;
  }
}

.input::-webkit-scrollbar {
  display: none;
}

.withoutGlass {
  padding-left: 0;

  [dir='rtl'] & {
    padding-right: calc(var(--ring-input-padding-block) * 3);
  }
}

.loaderActive {
  padding-right: calc(var(--ring-input-padding-inline) - var(--ring-input-padding-block));
}

.loaderOnTheRight {
  padding-right: 0;

  [dir='rtl'] & {
    padding-left: 0;
  }
}

.inputRevertOrder {
  order: -1;
}
